<template>
  <div class="images-container">
    <a-card title="素材管理" style="width: 100%">
      <template v-slot:extra><a href="#">more</a></template>
      <div class="top-action">
        <a-radio-group
          v-model:value="collect"
          button-style="solid"
          @change="getImagesData()"
        >
          <a-radio-button
            :value="item.value"
            v-for="item in radioArr"
            :key="item.id"
          >
            {{ item.name }}
          </a-radio-button>
        </a-radio-group>
        <a-button type="primary" @click="openModel">上传素材</a-button>
      </div>

      <a-row :gutter="16">
        <a-col
          :xs="24"
          :sm="12"
          :md="6"
          :lg="6"
          :xl="4"
          v-for="item in listArr"
          :key="item.id"
        >
          <div
            class="img-box"
            :style="{
              backgroundImage: 'url(' + item.url + ')'
            }"
          >
            <div class="action">
              <a-popconfirm
                title="你确定要删除当前图片么"
                ok-text="Yes"
                cancel-text="No"
                @confirm="delImgConfrim(item.id)"
                @cancel="delImgCancel"
              >
                <DeleteOutlined class="action-icon" />
              </a-popconfirm>
              <HeartOutlined
                :class="{ collect: item.is_collected }"
                class="action-icon"
                @click="isOncollect(item)"
              />
            </div>
          </div>
        </a-col>
      </a-row>

      <!-- 翻页 -->
      <a-pagination
        :total="totalCount"
        :show-total="totalCount => `Total ${totalCount} items`"
        :page-size="pageSize"
        v-model:current="currentPage"
        @change="onChange"
      />
    </a-card>

    <a-modal
      style="width:240px"
      v-model:visible="visible"
      title="Modal"
      ok-text="确认"
      cancel-text="取消"
      @Ok="onConform"
    >
      <a-upload-dragger
        name="image"
        :multiple="true"
        action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
        :headers="uploadHeaders"
        @change="handleChange"
      >
        <p class="ant-upload-drag-icon">
          <inbox-outlined />
        </p>
        <p class="ant-upload-text">
          Click or drag file to this area to upload
        </p>
        <p class="ant-upload-hint">
          Support for a single or bulk upload. Strictly prohibit from uploading
          company data or other band files
        </p>
      </a-upload-dragger>
    </a-modal>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import { radioArr } from './data'
import { getImages, isCollect, delImages } from '@/api/user'
import { getToken } from '@/utils/auth'

import { message } from 'ant-design-vue'
import {
  InboxOutlined,
  DeleteOutlined,
  HeartOutlined
} from '@ant-design/icons-vue'
export default {
  name: 'Images',
  components: {
    InboxOutlined,
    HeartOutlined,
    DeleteOutlined
  },

  setup() {
    const state = reactive({
      visible: false,
      collect: false,
      listArr: [],
      currentPage: 1,
      pageSize: 24,
      totalCount: 0,
      uploadHeaders: {
        Authorization: `Bearer ${getToken()}`
      }
    })

    const getImagesData = async currentPage => {
      const params = {
        page: currentPage || 1,
        per_page: state.pageSize,
        collect: state.collect // 是否收藏
      }
      const res = await getImages(params)
      state.listArr = res.data.results
      state.currentPage = res.data.page
      state.pageSize = res.data.per_page
      state.totalCount = res.data.total_count
    }

    // 图片上传动态
    const handleChange = info => {
      const status = info.file.status
      if (status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (status === 'done') {
        message.success(`${info.file.name} file uploaded successfully.`)
      } else if (status === 'error') {
        message.error(`${info.file.name} file upload failed.`)
      }
    }

    const onConform = () => {
      hideModel()
      getImagesData()
    }

    // 图片删除
    const delImgConfrim = async id => {
      await delImages(id)
      getImagesData()
    }
    const delImgCancel = () => {}

    const isOncollect = async data => {
      const res = await isCollect(data.id, !data.is_collected)
      data.is_collected = res.data.collect
    }

    const hideModel = () => {
      state.visible = false
    }

    const openModel = () => {
      state.visible = true
    }

    const onChange = currentPage => {
      getImagesData(currentPage)
    }

    getImagesData()

    return {
      radioArr,
      ...toRefs(state),

      onConform,
      onChange,
      openModel,
      delImgConfrim,
      delImgCancel,
      hideModel,
      isOncollect,
      getImagesData,
      handleChange
    }
  }
}
</script>

<style lang="scss">
.img-page-card-item .ant-card-body {
  padding: 0 !important;
}

.top-action {
  display: flex;
  justify-content: space-between;

  margin-bottom: 20px;
}

.img-box {
  height: 100px;
  margin-bottom: 20px;
  background-size: center;
  background-size: cover;
  position: relative;
  cursor: pointer;

  .action {
    background-color: rgba(255, 2555, 255, 0.5);
    height: 40px;
    align-items: center;
    display: flex;
    justify-content: center;
    .action-icon {
      font-size: 20px;
      color: #ffffff;
      flex: 1;
      &.collect {
        color: red;
      }
    }
  }
}
</style>
